<template>
  <div class="app">
    <VueDragFormdesign ref="formDesign">
      <template slot="controlButton">
        <el-button
          type="text"
          size="medium"
          @click="addForm"
          icon="el-icon-plus"
          >重置</el-button
        >
        <el-button type="text" size="medium" @click="save" icon="el-icon-check"
          >保存</el-button
        >
      </template>
      <template slot="formName">
        <span>
          <el-input
            style="width: 25%;"
            v-model="addObj.name"
            placeholder=" LOL是一种信仰 "
          ></el-input>
        </span>
      </template>
      <template slot="drag">
        <div class="el-card box-card form-item  is-always-shadow">
          <div class="el-card__header">表单列表</div>
          <div class="el-card__body">
            <el-collapse v-model="activeNames">
              <el-collapse-item title="表单列表" name="1">
                <el-select
                  v-model="formId"
                  filterable
                  placeholder="请选择"
                  @change="edit(formId)"
                >
                  <el-option
                    v-for="item in list"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </template>
    </VueDragFormdesign>
    <!-- <el-dialog
      :title="title"
      width="30%"
      top="50px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="isVisible"
    >
    
    </el-dialog> -->
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
export default {
  name: "codegen",
  components: { Pagination },
  data() {
    return {
      action: "ADD",
      formId: "",
      activeNames: ["1"],
      queryParams: {},
      addObj: {
        bytes: null,
        name: ""
      },
      list: [],
      pagination: {
        size: 5,
        num: 1
      },
      tableKey: 0,
      loading: false,
      total: 0,
      isVisible: false,
      title: "新增表单"
    };
  },
  computed: {},
  created() {
    this.search();
  },
  activated() {},
  methods: {
    edit(id) {
      this.action = "EDIT";
      var queryObj = {
        id: id
      };
      this.$get("/activiti/service/actFpBytearray/getMsg", {
        ...queryObj
      }).then(res => {
        const data = res.data.resultBody;
        this.addObj = data;
        this.initModel(data.content);
      });
    },
    initModel(content) {
      this.$refs.formDesign.initModel(JSON.parse(content));
    },
    addForm() {
      this.action = "ADD";
      this.formId = "";
      this.addObj = {};
      this.$refs.formDesign.initModel();
    },
    search() {
      var queryObj = {
        pageNum: this.pagination.num,
        pageSize: this.pagination.size,
        name: this.queryParams.name
      };
      this.$get("activiti/service/actFpBytearray/list", {
        ...queryObj
      }).then(res => {
        const data = res.data.resultBody;
        this.total = data.total;
        this.list = data.rows;
      });
    },
    save() {
      console.log(this.$refs.formDesign);
      if (this.action == "ADD") {
        this.addObj.bytes = JSON.stringify(this.$refs.formDesign.getModel());
        this.addObj.generated = "1";
        this.addObj.rev = "1";
        this.$post("/activiti/service/actFpBytearray", { ...this.addObj }).then(
          r => {
            this.$message.success("新增成功");
            this.addForm();
          }
        );
      } else {
        this.addObj.bytes = JSON.stringify(this.$refs.formDesign.getModel());
        this.addObj.generated = "1";
        this.addObj.rev = "1";
        this.$put("/activiti/service/actFpBytearray", { ...this.addObj }).then(
          r => {
            this.$message.success("修改成功");
            this.addForm();
          }
        );
      }
    }
  },
  filters: {},
  destroyed() {}
};
</script>
